<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />

	<title>Tic Tac Toe</title>
    <link rel="apple-touch-icon" href="iphone_icon.png"/>
    <link rel="apple-touch-startup-image" href="iphone_splash.png" />
	<link rel="stylesheet" href="/jquery/jquery.mobile-1.1.0.css" />

	<script src="/jquery/jquery-1.7.2.js"></script>
	<script src="/jquery/jquery.mobile-1.1.0.js"></script>
	<script src="ttt.js"></script>

<script>

$(document).ready(function () {
	$(window).bind('orientationchange', function(event) {
	});
});

function clearUI() {
//	$("#result").html(RockPaperScissors.result[0] +" "+ RockPaperScissors.result[1]);
	$("#board .button").text("-");
	$("#board .button").buttonMarkup({theme: "c"});
//	$("#board .button").button("refresh");
}
function displayWinner(winner_message) {
	$("#menu .message").html(winner_message);
	$.mobile.changePage('#menu', {transition: 'pop', role: 'dialog'});
}
function hideWinner() {
	// not necessary
}
function setCellClickFunction(func) {
	$("#board .button").click(func);
}
function setRestartClickFunction(func) {
	$("#menu .button").click(func);
}
function setCellText(id, turn) {
//	if (turn == "O")
//		$("#board .button[id="+ id +"]").buttonMarkup({theme: "b"});
//	else
//		$("#board .button[id="+ id +"]").buttonMarkup({theme: "a"});

	$("#board .button[id="+ id +"]").text(turn);
	$("#board .button[id="+ id +"]").button("refresh"); 
}

</script>
<style>

@media screen and (orientation: landscape) {
	#glue {
		line-height: 13px;
	}
}

@media screen and (orientation: portrait) {
	#glue {
		line-height: 173px;
	}
}

.result {
	height: 86px;
	text-align: center;
	font-size: 40px;
	line-height: 86px;
}

</style>
</head> 
<body> 

<!-- Start of first page: #one -->
<div data-role="page" id="board">

	<div data-role="header" data-theme="b">
		<h1>Tic Tac Toe</h1>
	</div><!-- /header -->

	<div data-role="content" >

<div id="glue">&nbsp;</div>

<div class="ui-grid-b">
	<div class="ui-block-b"><button data-theme="a" id="ttt0" class="button">-</button></div>
	<div class="ui-block-b"><button data-theme="a" id="ttt1" class="button">-</button></div>
	<div class="ui-block-b"><button data-theme="a" id="ttt2" class="button">-</button></div>
	<div class="ui-block-b"><button data-theme="a" id="ttt3" class="button">-</button></div>
	<div class="ui-block-b"><button data-theme="a" id="ttt4" class="button">-</button></div>
	<div class="ui-block-b"><button data-theme="a" id="ttt5" class="button">-</button></div>
	<div class="ui-block-b"><button data-theme="a" id="ttt6" class="button">-</button></div>
	<div class="ui-block-b"><button data-theme="a" id="ttt7" class="button">-</button></div>
	<div class="ui-block-b"><button data-theme="a" id="ttt8" class="button">-</button></div>
</div><!-- /grid-b -->

	</div><!-- /content -->

	<div data-role="footer" data-theme="d">
		<h4 id="result">Page Footer</h4>
	</div><!-- /footer -->
</div><!-- /page one -->

<!-- Start of third page: #menu -->
<div data-role="page" id="menu">

	<div data-role="header" data-theme="e">
		<h1>End of Game</h1>
	</div><!-- /header -->

	<div data-role="content" data-theme="d">
		<h2 class="message">End of Game</h2>
		<p><a href="#" data-rel="back" data-role="button" data-inline="true" data-icon="back" class="button">Back!</a></p>
	</div><!-- /content -->
</div><!-- /page menu -->

</body>
</html>
